<div ng-controller="AbrirCajaController">

    <div class="alert alert-info" ng-show="alertMessageDisplay()">
        <p><strong>INFO:</strong>La caja ya esta abierta, o no se pudo cargar correctamente...</p>
    </div>

    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
        {{alert.msg}}
    </alert>

    <fieldset>
        <legend style="font-size: 16px; font-weight: bold;">ABRIR CAJA</legend>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label>AGENCIA</label>
                    <p style="font-size: 13px;"><span ng-bind="agenciaSession.denominacion"/> </p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label>CAJA</label>
                    <p style="font-size: 13px;"><span ng-bind="cajaSession.denominacion"/><span>-</span><span ng-bind="cajaSession.abreviatura"/></p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label>ESTADO</label>
                    <p style="font-size: 13px;"><span ng-bind-template="{{cajaSession.abierto ? 'ABIERTO' : 'CERRADO'}}"/></p>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend style="font-size: 16px; font-weight: bold;">DETALLE CAJA</legend>
        <form name="abrirCajaForm" ng-submit="abrirCaja()" novalidate>
            <div class="row">
                <div class="col-sm-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-disabled="buttonDisableState()"> Ocultar ceros
                        </label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-11" style="font-size: 13px;">
                    <tabset>
                        <tab ng-repeat="detalle in detalleCaja" heading="{{detalle.moneda.simbolo}} {{detalle.moneda.denominacion}} &rarr; Total:{{total[$index]()}}" select="updateLayout[$index]()">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div ng-grid="getTemplate($index,detalle.moneda.simbolo)" style="border: 1px solid rgb(212,212,212); height: 335px;">
                                        </div>
                                        <div>
                                            <div class="ngFooterPanel ng-scope" style="border: 1px solid rgb(212,212,212); width: 100%; height: 55px;">
                                                <div class="ngTotalSelectContainer">
                                                    <div class="ngFooterTotalItems ngNoMultiSelect">
                                                        <span class="ngLabel ng-binding">Total: {{total[$index]()}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="buttonDisableState()">Guardar</button>
            <button type="button" class="btn btn-default" ng-click="cancelar()">Cancelar</button>
        </form>
    </fieldset>
</div>